<template>
	<page-meta>
	    <navigation-bar
			title="设备录入"
			background-color="#EEEEEE"
			front-color="#ffffff "
	    />
	</page-meta>
	<view class="uni-padding-wrap">
		<form @submit="formSubmit" @reset="formReset">
			<view class="uni-form-item uni-column">
				<view class="uni-title uni-common-pl">资材大类编号</view>
				<input class="uni-input" name="domain" v-model="domain" placeholder="请选择资材大类编号" maxlength="30" :disabled="true" @tap = "domainToOpen"/>
				<jpSelect ref="domainJpSelect" :list="domainList" @checked="domainChecked" :item="domain" select="radio" tite="请选择资材大类编号"></jpSelect>
			</view>
			<view class="uni-form-item uni-column">
				<view class="uni-title uni-common-pl">资材小类编号</view>
				<input class="uni-input" name="system_name" v-model="system_name" placeholder="请选择资材小类编号" maxlength="30" :disabled="true" @tap = "systemNameToOpen"/>
				<jpSelect ref="systemNameJpSelect" :list="systemNameList" @checked="systemNameChecked" :item="system_name" select="radio" tite="请选择资材小类编号"></jpSelect>
			</view>
			<view class="uni-form-item uni-column">
				<view class="uni-title uni-common-pl">资材名称</view>
				<input class="uni-input" name="et_name" v-model="et_name" placeholder="请选择资材名称" maxlength="30" @tap = "etNameToOpen" disabled="true"/>
				<jpSelect ref="etNameJpSelect" :list="etNameList" @checked="etNameChecked" :item="et_name" select="radio" tite="请选择资材名称"></jpSelect>
			</view>
			<view class="uni-form-item uni-column">
				<view class="uni-title uni-common-pl">资材编号</view>
				<input class="uni-input" name="et_code" v-model="et_code" placeholder="请输入资材编号" maxlength="30"/>
			</view>
			<view class="uni-form-item uni-column">
				<view class="uni-title uni-common-pl">线路编号</view>
				<input class="uni-input" name="line_id" v-model="line_id" placeholder="请选择线路编号" maxlength="11" @tap = "lineIdToOpen" disabled="true"/>
				<jpSelect ref="lineIdJpSelect" :list="lineIdList" @checked="lineIdChecked" :item="line_id" select="radio" tite="请选择线路编号"></jpSelect>
			</view>
			<view class="uni-form-item uni-column">
				<view class="uni-title uni-common-pl">所属站点</view>
				<input class="uni-input" name="station_name" v-model="station_name" placeholder="请输入所属站点" maxlength="30" @tap = "stationNameToOpen" disabled="true"/>
				<jpSelect ref="stationNameJpSelect" :list="stationNameList" @checked="stationNameChecked" :item="station_name" select="radio" tite="请选择所属站点"></jpSelect>
			</view>
			<view class="uni-form-item uni-column">
				<view class="uni-title uni-common-pl">规格型号</view>
				<input class="uni-input" name="et_model" v-model="et_model" placeholder="请输入规格型号" maxlength="50"/>
			</view>
			<view class="uni-form-item uni-column">
				<view class="uni-title uni-common-pl">设备类型</view>
				<input class="uni-input" name="et_type" v-model="et_type" placeholder="请输入设备类型" maxlength="30"/>
			</view>
			<view class="uni-form-item uni-column">
				<view class="uni-title uni-common-pl">设备描述</view>
				<input class="uni-input" name="et_comment" v-model="et_comment" placeholder="请输入设备描述" maxlength="150"/>
			</view>
			<view class="uni-form-item uni-column">
				<view class="uni-title uni-common-pl">维修方式</view>
				<input class="uni-input" name="maintain_way" v-model="maintain_way" placeholder="请输入维修方式" maxlength="200"/>
			</view>
			<view class="uni-form-item uni-column">
				<view class="uni-title uni-common-pl">供应商</view>
				<input class="uni-input" name="et_supplier" v-model="et_supplier" placeholder="请输入供应商" maxlength="50"/>
			</view>
			<view class="uni-form-item uni-column">
				<view class="uni-title uni-common-pl">制作商</view>
				<input class="uni-input" name="et_producer" v-model="et_producer" placeholder="请输入制作商" maxlength="50"/>
			</view>
			
			
			<view class="uni-form-item uni-column">
				<view class="uni-title uni-common-pl">保修期至</view>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							当前选择
						</view>
						<view class="uni-list-cell-db">
							<picker mode="date" :value="guarantee_period" :start="startDate" :end="endDate" @change="guaranteePeriodChange">
								<view class="uni-input">{{guarantee_period}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
			<view class="uni-form-item uni-column">
				<view class="uni-title uni-common-pl">产品序列号</view>
				<input class="uni-input" name="serial_num" v-model="serial_num" placeholder="请输入产品序列号" maxlength="11"/>
			</view>
			<view class="uni-form-item uni-column">
				<view class="uni-title uni-common-pl">安装位置</view>
				<input class="uni-input" name="install_location" v-model="install_location" placeholder="请输入安装位置" maxlength="50"/>
			</view>
			<view class="uni-form-item uni-column">
				<view class="uni-title uni-common-pl">安装日期</view>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							当前选择
						</view>
						<view class="uni-list-cell-db">
							<picker mode="date" :value="install_date" :start="startDate" :end="endDate" @change="installDateChange">
								<view class="uni-input">{{install_date}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
			<view class="uni-form-item uni-column">
				<view class="uni-title uni-common-pl">专业类别编号</view>
				<input class="uni-input" name="professional_id" v-model="professional_id" placeholder="请输入专业类别编号" maxlength="11"/>
			</view>
			<view class="uni-form-item uni-column">
				<view class="uni-title uni-common-pl">所属单位</view>
				<input class="uni-input" name="owner" v-model="owner" placeholder="请输入所属单位" maxlength="30"/>
			</view>
			<view class="uni-form-item uni-column">
				<view class="uni-title uni-common-pl">额定电压</view>
				<input class="uni-input" name="voltage" v-model="voltage" placeholder="请输入额定电压" maxlength="100"/>
			</view>
			<view class="uni-form-item uni-column">
				<view class="uni-title uni-common-pl">额定功率</view>
				<input class="uni-input" name="power" v-model="power" placeholder="请输入额定功率" maxlength="100"/>
			</view>
			<view class="uni-form-item uni-column">
				<view class="uni-title uni-common-pl">使用寿命</view>
				<input class="uni-input" name="life" v-model="life" placeholder="请输入使用寿命" maxlength="50"/>
			</view>
			<view class="uni-form-item uni-column">
				<view class="uni-title uni-common-pl">是否维修计划</view>
				<radio-group name="is_plan" @change="isPlanChange">
					<label>
						<radio value="1" /><text>是</text>
					</label>
					<label>
						<radio value="0" /><text>否</text>
					</label>
				</radio-group>
			</view>
			<view class="uni-form-item uni-column" v-show="flag">
				<!-- <view class="title">首次维修计划日期</view> -->
				<!-- <input class="uni-input" name="maintain_frist_time" v-model="maintain_frist_time" placeholder="请输入首次维修计划日期" /> -->
				<view class="uni-title uni-common-pl">首次维修计划日期</view>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							当前选择
						</view>
						<view class="uni-list-cell-db">
							<picker mode="date" :value="maintain_frist_time" :start="startDate" :end="endDate" @change="bindFristDateChange">
								<view class="uni-input">{{maintain_frist_time}}</view>
							</picker>
						</view>
					</view>
				</view>
				<!-- <view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							当前选择
						</view>
						<view class="uni-list-cell-db">
							<picker mode="time" :value="maintain_frist_time_sel" start="09:01" end="21:01" @change="bindFristTimeChange">
								<view class="uni-input">{{maintain_frist_time_sel}}</view>
							</picker>
						</view>
					</view>
				</view> -->
			</view>
			<view class="uni-form-item uni-column" v-show="flag">
				<!-- <view class="title">本次维护计划日期</view> -->
				<!-- <input class="uni-input" name="maintain_this_time" v-model="maintain_this_time" placeholder="请输入本次维护计划日期" /> -->
				<view class="uni-title uni-common-pl">本次维护计划日期</view>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							当前选择
						</view>
						<view class="uni-list-cell-db">
							<picker mode="date" :value="maintain_this_time" :start="startDate" :end="endDate" @change="bindThisDateChange">
								<view class="uni-input">{{maintain_this_time}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
			
			<view class="uni-form-item uni-column" v-show="flag">
				<!-- <view class="title">下次维护计划日期</view> -->
				<!-- <input class="uni-input" name="maintain_next_time" v-model="maintain_next_time" placeholder="请输入下次维护计划日期" /> -->
				<view class="uni-title uni-common-pl">下次维护计划日期</view>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							当前选择
						</view>
						<view class="uni-list-cell-db">
							<picker mode="date" :value="maintain_next_time" :start="startDate" :end="endDate" @change="bindNextDateChange">
								<view class="uni-input">{{maintain_next_time}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
			<view class="uni-form-item uni-column" v-show="flag">
				<view class="uni-title uni-common-pl">距离下次维修计划间隔（天）</view>
				<input class="uni-input" name="interval_day" v-model="interval_day" placeholder="请输入距离下次维修计划间隔" maxlength="11"/>
			</view>
			<view class="uni-form-item uni-column" v-show="flag">
				<view class="uni-title uni-common-pl">距离下次维护计划时间（天）</view>
				<input class="uni-input" name="maintain_next_day" v-model="maintain_next_day" placeholder="请输入距离下次维护计划时间" maxlength="11"/>
			</view>

			<view class="uni-btn-v">
				<button form-type="submit" type='primary'>录入</button>
				<button type="default" form-type="reset">重置</button>
			</view>
		</form>
	</view>
</template>

<style>
	page{
		background-color: #F7F7F7;
	}
	.uni-form-item .title {
		padding: 20rpx 0;
	}
	.headerTitle{
		font-size: 18px;
		text-align: center;
	}
	.extraInfo {
		font-size: 24rpx;
		color:#666666;
		margin-top: 0px;
	}
	.headerQuestion{
		font-size: 18px;
	}
	.headerDesc{
		color:#7A7E83;
		font-size: 16px;
	}
	.headerRedDesc{
		color:red;
		font-size: 16px;
		display: inline;
	}

	.manageIn {
		position: absolute;
		top: 10rpx;
		right: 30rpx;
		color: #007aff;
	}
	
</style>
<script>
	var graceCheckerJs = require('common/graceChecker.js');
	import tableTitleConst from '../../../common/tableTitleConst.js'
	import jpSelect from '@/components/jp-select/jp-select.vue';
	// import {
	// 	mapState
	// } from 'vuex';
	export default {
		components: {
			jpSelect
		},
		data() {
			const currentDate = this.getDate({
			   format: true
		   })
			return {
				domainList:[],
				systemNameList:[],
				etNameList:[],
				lineIdList:[],
				stationNameList:[],
				domain:"",
				system_name:"",
				et_name:"",
				et_code:"",
				line_id:"",
				station_name:"",
				et_model:"",
				et_type:"",
				et_comment:"",
				maintain_way:"",
				et_supplier:"",
				et_producer:"",
				date_of_production:"",
				guarantee_period:"",
				serial_num:"",
				install_location:"",
				install_date:"",
				professional_id:"",
				owner:"",
				voltage:"",
				power:"",
				life:"",
				is_plan:"",
				maintain_frist_time:"",
				maintain_this_time:"",
				maintain_next_time:"",
				interval_day:"",
				maintain_next_day:"",
				
				title: '首次维修计划日期',
				array: ['中国', '美国', '巴西', '日本'],
				index: 0,
				flag:true
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad: function(option) {
			this.$myRequest({
				url:'/devStatus/getDomain'
			}).then((res) => {
				this.domainList = res.result;
			});
			// uni.request({
			//     url: 'http://127.0.0.1:10100/devStatus/getDomain', //仅为示例，并非真实接口地址。
			//     success: (res) => {
			//         this.domainList = res.data.result;
			//     }
			// });
			this.$myRequest({
				url:'/devStatus/getLine'
			}).then((res) => {
				this.lineIdList = res.rows;
			});
			// uni.request({
			//     url: 'http://127.0.0.1:10100/devStatus/getLine', //仅为示例，并非真实接口地址。
			//     success: (res) => {
			//         this.lineIdList = res.data.rows;
			//     }
			// });
		},
		methods: {
			domainToOpen() {
				this.$refs.domainJpSelect.toOpen()
			},
			domainChecked(el) {
				this.domain = el.name;
				this.$myRequest({
					url:'/devStatus/getSystem',
					data:{parentId:el.id}
				}).then((res) => {
					this.systemNameList = res.result;
				});
				// uni.request({
				//     url: 'http://127.0.0.1:10100/devStatus/getSystem', //仅为示例，并非真实接口地址。
				// 	data:{parentId:el.id},
				//     success: (res) => {
				//         this.systemNameList = res.data.result;
				//     }
				// });
			},
			systemNameChecked(el){
				this.system_name = el.name;
				this.$myRequest({
					url:'/devStatus/getDevice',
					data:{parentId:el.id}
				}).then((res) => {
					this.etNameList = res.result;
				});
				// uni.request({
				//     url: 'http://127.0.0.1:10100/devStatus/getDevice', //仅为示例，并非真实接口地址。
				// 	data:{parentId:el.id},
				//     success: (res) => {
				//         this.etNameList = res.data.result;
				//     }
				// });
			},
			systemNameToOpen() {
				this.$refs.systemNameJpSelect.toOpen()
			},
			etNameChecked(el){
				this.et_name = el.name
			},
			etNameToOpen() {
				this.$refs.etNameJpSelect.toOpen()
			},
			lineIdChecked(el){
				this.line_id = el.id;
				this.$myRequest({
					url:'/devStatus/getEtStation',
					data:{line_id:el.id}
				}).then((res) => {
					var beforStationNameList = res.rows;
					for(let i = 0; i<beforStationNameList.length;i++){
						beforStationNameList[i].name = beforStationNameList[i].id;
					}
					console.log("beforStationNameList>>>"+beforStationNameList);
					this.stationNameList = beforStationNameList;
				});
				// uni.request({
				//     url: 'http://127.0.0.1:10100/devStatus/getEtStation', //仅为示例，并非真实接口地址。
				// 	data:{line_id:el.id},
				//     success: (res) => {
				// 		var beforStationNameList = res.data.rows;
				// 		for(let i = 0; i<beforStationNameList.length;i++){
				// 			beforStationNameList[i].name = beforStationNameList[i].id;
				// 		}
				// 		console.log("beforStationNameList>>>"+beforStationNameList);
				//         this.stationNameList = beforStationNameList;
				//     }
				// });
			},
			lineIdToOpen() {
				this.$refs.lineIdJpSelect.toOpen()
			},
			stationNameChecked(el){
				this.station_name = el.id
			},
			stationNameToOpen() {
				this.$refs.stationNameJpSelect.toOpen()
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//首次时间
			bindFristDateChange: function(e) {
				this.maintain_frist_time = e.target.value
			},
			//本次时间
			bindThisDateChange: function(e) {
				this.maintain_this_time = e.target.value
			},
			//下次时间
			bindNextDateChange: function(e) {
				this.maintain_next_time = e.target.value
			},
			//保修日期
			guaranteePeriodChange: function(e) {
				this.guarantee_period = e.target.value
			},
			//安装日期installTimeChange
			installDateChange: function(e) {
				this.install_date = e.target.value
			},
			isPlanChange:function(e){
				if(e.target.value == 0){
					this.flag = false;
					this.is_plan = 0;
				}else if (e.target.value == 1){
					this.flag = true;
					this.is_plan = 1;
				}
			},
			//表单
			formSubmit: function(e) {
				//表单数据校验
				console.log(rules);
				var rule = rules;
				var formData = e.detail.value;
				var checkflg = graceCheckerJs.check(formData, rule);
				if (!checkflg) {
					uni.showToast({
						title: graceCheckerJs.error,
						icon: "none"
					});
				} else {
					uni.showLoading({
						mask: true,
						title: '录入中...'
					});
					
					if(this.is_plan == 0 || this.is_plan == "0"){
						this.maintain_frist_time = "";
						this.maintain_this_time = "";
						this.maintain_next_time = "";
						this.interval_day = "";
						this.maintain_next_day = "";
					}
					this.$myRequest({
						url:'/et/saveAttrValue',
						data: {
						    domain:this.domain,
							system_name:this.system_name,
							et_name:this.et_name,
							et_code:this.et_code,
							line_id:this.line_id,
							station_name:this.station_name,
							et_model:this.et_model,
							et_type:this.et_type,
							et_comment:this.et_comment,
							maintain_way:this.maintain_way,
							et_supplier:this.et_supplier,
							et_producer:this.et_producer,
							date_of_production:this.date_of_production,
							guarantee_period:this.guarantee_period,
							serial_num:this.serial_num,
							install_location:this.install_location,
							install_date:this.install_date,
							professional_id:this.professional_id,
							owner:this.owner,
							voltage:this.voltage,
							power:this.power,
							life:this.life,
							is_plan:this.is_plan,
							maintain_frist_time:this.maintain_frist_time,
							maintain_this_time:this.maintain_this_time,
							maintain_next_time:this.maintain_next_time,
							interval_day:this.interval_day,
							maintain_next_day:this.maintain_next_day
						}
					}).then((res) => {
						uni.hideLoading();
						if(res.code == "success"){
							uni.showToast({
								title: "录入成功！",
								icon: "success"
							});
						}else{
							uni.showToast({
								title: "请求失败...",
								icon: "none"
							});
						}
					});
					
					
					// uni.request({
					//     url: 'http://127.0.0.1:10100/et/saveAttrValue', //仅为示例，并非真实接口地址。
					//     data: {
					//         domain:this.domain,
					// 		system_name:this.system_name,
					// 		et_name:this.et_name,
					// 		et_code:this.et_code,
					// 		line_id:this.line_id,
					// 		station_name:this.station_name,
					// 		et_model:this.et_model,
					// 		et_type:this.et_type,
					// 		et_comment:this.et_comment,
					// 		maintain_way:this.maintain_way,
					// 		et_supplier:this.et_supplier,
					// 		et_producer:this.et_producer,
					// 		date_of_production:this.date_of_production,
					// 		guarantee_period:this.guarantee_period,
					// 		serial_num:this.serial_num,
					// 		install_location:this.install_location,
					// 		install_date:this.install_date,
					// 		professional_id:this.professional_id,
					// 		owner:this.owner,
					// 		voltage:this.voltage,
					// 		power:this.power,
					// 		life:this.life,
					// 		is_plan:this.is_plan,
					// 		maintain_frist_time:this.maintain_frist_time,
					// 		maintain_this_time:this.maintain_this_time,
					// 		maintain_next_time:this.maintain_next_time,
					// 		interval_day:this.interval_day,
					// 		maintain_next_day:this.maintain_next_day
					//     },
					//     success: (res) => {
					// 		uni.hideLoading();
					// 		if(res.data.code == "success"){
					// 			uni.showToast({
					// 				title: "录入成功！",
					// 				icon: "success"
					// 			});
					// 		}else{
					// 			uni.showToast({
					// 				title: "请求失败...",
					// 				icon: "none"
					// 			});
					// 		}
					//     },
					// 	fail: (res) => {
					// 		uni.showToast({
					// 			title: "请求失败..."+res.code,
					// 			icon: "none"
					// 		});
					// 	}
					// });
				}
			},
			formReset: function(e) {
				console.log('数据清空触发...');
			}
		}
	}
</script>
